<template>
    <view class="page">
        <div class="circle-list" v-if="RecordList.length>0">
            <div class="circle-item" v-for="item in RecordList" :key="item.id" @click="skipLoop(item.id)">
                <div class="item-head">
                    <img :src="item.thumb_img_url">
                </div>
                <div class="item-name">
                    <h4>{{item.name}}</h4>
                    <p>{{item.desc}}</p>
                </div>
                <div class="item-btn" @click.stop="skipLoop(item.id)">进圈</div>
            </div>
        </div>
    </view>
</template>

<script>
    export default {
        name: "circleRecord",
        data(){
            return{
                RecordList:[],
                page: 1,
                limit: 10
            }
        },
        onLoad(){
          this.recentCircle();
        },
        methods:{
            //获取用户预览圈子列表
            async recentCircle(){
                let params = {
                    page: this.page,
                    limit: this.limit,
                    user_token: uni.getStorageSync('userToken')
                }
                const res = await this.$api.recentCircle(params)
                if (res.data.level) {
                    console.log(res)
                    if (this.page==1){
                        this.RecordList = res.data.data
                    } else {
                        this.RecordList = this.RecordList.concat(res.data.data);
                    }

                }else {
                    uni.showToast({
                        icon:'none',
                        title:res.data.message
                    })
                }
            },
            //进圈
            skipLoop(id){
                // this.keyWord = '';
                // this.LookUpShow = false;
                uni.navigateTo({
                    url: '/pages/circlebar/circlebarhome/circlebarhome?circle_id='+id
                })
            },
        }
    }
</script>

<style scoped lang="scss">
    .circle-list{
        width: 100vw;
        display: flex;
        flex-direction: column;
        justify-content: left;
        .circle-item{
            display: flex;
            flex-direction: row;
            justify-content: left;
            align-items: center;
            height: 168rpx;
            padding: 0 30rpx;
            .item-head{
                 width: 108rpx;
                 height: 108rpx;
                 border-radius:6px;
                 overflow: hidden;
             }
            .item-name{
                padding: 0 0 0 16rpx;
                display: flex;
                max-width: calc(100vw - 288rpx);
                flex-direction: column;
                justify-content: flex-start;
                align-items: center;
                h4{
                    width: 100%;
                    font-size: 32rpx;
                    line-height: 64rpx;
                    font-weight: bold;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
                p{
                    width: 100%;
                    font-size: 28rpx;
                    line-height: 36rpx;
                    font-weight: normal;
                    color: #BBBCBF;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
            }
            .item-btn{
                margin-left: auto;
                width: 120rpx;
                height: 56rpx;
                text-align: center;
                line-height: 56rpx;
                font-size: 26rpx;
                font-weight: bold;
                color: #000000;
                background: #FFE226;
                border-radius: 8rpx;
            }
        }
    }
</style>